<template>
  <div class="main">
    <div class="page-left">
      <div class="section-top">
        <div class="top-box">
          <div class="box-title">男女比例</div>
          <div class="sex-content">
            <div class="sex-box">
              <div class="box-icon female">
                <span>{{ sex.femalePercent }}%</span>
                <span>女</span>
              </div>
              <div class="count"><span>{{ sex.femaleCnt }}</span>人</div>
            </div>
            <div class="sex-box">
              <div class="box-icon man">
                <span>{{ sex.malePercent }}%</span>
                <span>男</span>
              </div>
              <div class="count"><span>{{ sex.maleCnt }}</span>人</div>
            </div>
          </div>
        </div>
        <div class="top-box">
          <div class="box-title">年龄分布图</div>
          <div class="age-content" ref="ageChart"></div>
        </div>
      </div>
      <div class="section-bottom">
        <div class="box-title">村-群租房-情况</div>
        <div class="house-content" ref="houseChart"></div>
      </div>
    </div>
    <div class="page-right">
      <div class="box-title">户籍地分布情况</div>
      <div class="city-content" ref="cityChart"></div>
      <div class="province-content" ref="provinceChart"></div>
    </div>
  </div>
</template>

<script>
const echarts = require('echarts')
import api from '@/api'
export default {
  name: "charts",
  data() {
    return {
      sex: {
        femaleCnt: 0,
        femalePercent: 0,
        maleCnt: 0,
        malePercent: 0
      }
    }
  },
  created() {
    this.getSexCount()
    this.getAgeCount()
    this.getProvinceCount()
    this.getCityCount()
    this.getHouseCount()
  },
  methods: {
    // 获取性别数据
    async getSexCount() {
      let { code, data } = await api.PM_COUNT_SEX()
      if (code === 0) {
        this.sex = data
      }
    },
    // 获取年龄数据
    async getAgeCount() {
      let { code, data } = await api.PM_COUNT_AGE()
      if (code === 0) {
        this.$nextTick(() => {
          this.drawAge(data.category, data.series)
        })
      }
    },
    // 获取省数据
    async getProvinceCount() {
      let { code, data } = await api.PM_COUNT_PROVINCE()
      if (code === 0) {
        this.$nextTick(() => {
          this.drawProvince(data.category, data.series)
        })
      }
    },
    // 获取市数据
    async getCityCount() {
      let { code, data } = await api.PM_COUNT_CITY()
      if (code === 0) {
        let cityCategory = data.category.splice(0, 7)
        let citySeries = data.series.splice(0, 7)

        this.$nextTick(() => {
          this.drawCity(cityCategory, citySeries)
        })
      }
    },
    // 获取群租房数据
    async getHouseCount() {
      let { code, data } = await api.PM_COUNT_HOUSE()
      if (code === 0) {
        this.$nextTick(() => {
          this.drawHouse(data.category, data.series)
        })
      }
    },
    // 年龄
    drawAge(category, value) {
      let dom = this.$refs.ageChart
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: false,
        grid: {
          top: 58,
          left: 25,
          right: 70,
          bottom: 25,
          containLabel: true
        },
        xAxis: {
          type: 'value',
          name: '人数',
          nameTextStyle: {
            color: '#fff',
            fontSize: 15,
            verticalAlign: 'top',
            lineHeight: 43
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#01737A'
            }
          },
          axisLabel: {
            color: '#fff',
            fontSize: 15,
            margin: 14
          },
          splitLine: false
        },
        yAxis: {
          type: 'category',
          data: category,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#01737A'
            }
          },
          axisLabel: {
            color: '#fff',
            fontSize: 15,
            margin: 16
          },
          axisTick: false
        },
        series: [
          {
            name: '人数',
            type: 'bar',
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [{
                offset: 0, color: '#0167E9' // 0% 处的颜色
              }, {
                offset: 1, color: '#69B2FF' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            },
            barMaxWidth: 20,
            data: value
          }
        ]
      }
      this.drawChart(dom, option)
    },
    // 城市
    drawCity(category, value) {
      category = category.reverse()
      value = value.reverse()
      let dom = this.$refs.cityChart
      let data = [...value]
      let maxValue = value.sort((a, b) => b - a)[0]
      let bgBarValue = Math.ceil(maxValue/10) * 10
      let option = {
        tooltip: {},
        legend: false,
        grid: {
          top: 58,
          left: 40,
          right: 38,
          bottom: 25,
          containLabel: true
        },
        xAxis: {
          type: 'value',
          axisLine: false,
          axisLabel: false,
          splitLine: false
        },
        yAxis: {
          type: 'category',
          data: category,
          axisLine: false,
          axisLabel: {
            color: '#fff',
            fontSize: 15,
            margin: 12
          },
          boundaryGap: true,
          axisTick: { //刻度线
            alignWithLabel:true,  //刻度线和标签对齐，boundaryGap为true时有效
          },
        },
        series: [
          // 背景柱
          {
            type: 'bar',
            color: '#1B234E',
            barWidth: 26,
            barGap: '-84%',
            silent:true,
            animation: false,
            data: data.map(() => {
              return {
                value: bgBarValue + 12,
                itemStyle: {
                  borderWidth: 1,
                  borderColor: '#0154BE',
                  borderRadius: 26
                }
              }
            })
          },
          // 占位柱
          {
            type: 'bar',
            stack: 'city',
            color: 'transparent',
            barWidth: 18,
            silent:true,
            animation: false,
            data: data.map(() => { return { value: 6 } })
          },
          {
            name: '人数',
            type: 'bar',
            stack: 'city',
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [{
                offset: 0, color: '#0336FF' // 0% 处的颜色
              }, {
                offset: 1, color: '#01B4FF' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            },
            barWidth: 18,
            label: {
              show: true,
              position: [425, 1],
              fontSize: 15,
              color: '#fff'
            },
            data: data.map(val => {
              return {
                value: val,
                itemStyle: {
                  borderRadius: 18
                }
              }
            })
          }
        ]
      }
      this.drawChart(dom, option)
    },
    // 省
    drawProvince(category, value) {
      let dom = this.$refs.provinceChart
      let data = category.map((name, index) => {
        return {
          name: name,
          value: value[index]
        }
      })
      let option = {
        legend: {
          type: 'scroll',
          top: '85%',
          left: 30,
          width: '90%',
          itemWidth: 16,
          itemHeight: 5,
          itemGap: 16,
          textStyle: {
            color: '#00FCF9',
            fontSize: 14
          },
          pageIconColor: '#fff',
          pageTextStyle: {
            color: '#00FCF9',
            fontSize: 14
          }
        },
        tooltip: {
          formatter: '{b} {c}人'
        },
        series: [
          {
            type: 'pie',
            radius: [0, 140],
            center: ['51%', '43%'],
            label: {
              color: '#00FCF9',
              fontSize: 16,
              formatter: '{b} {d}%'
            },
            itemStyle: {
              borderRadius: 0
            },
            data: data
          }
        ]
      }
      this.$nextTick(() => {
        this.drawChart(dom, option)
      })
    },
    // 群租房
    drawHouse(category, value) {
      let dom = this.$refs.houseChart
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          top: 10,
          itemWidth: 9,
          itemHeight: 9,
          itemGap: 32,
          textStyle: {
            color: '#00FCF9',
            fontSize: 14
          }
        },
        grid: {
          top: 58,
          left: 25,
          right: 70,
          bottom: 25,
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: category,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#01737A'
            }
          },
          axisLabel: {
            color: '#fff',
            fontSize: 15,
            margin: 14
          },
          axisTick: false,
          splitLine: false
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: true,
            lineStyle: {
              color: '#01737A'
            }
          },
          axisLabel: {
            color: '#fff',
            fontSize: 15,
            margin: 16
          },
          splitLine: {
            lineStyle: {
              color: '#01737A'
            }
          },
          axisTick: false
        },
        series: [
          {
            type: 'bar',
            barGap: '70%',
            color: '#0167E9',
            barMaxWidth: 10,
            name: value[0].name,
            data: value[0].data
          },
          {
            type: 'bar',
            color: {
              type: 'linear',
              x: 0,
              y: 1,
              x2: 0,
              y2: 0,
              colorStops: [{
                offset: 0, color: '#EF6E18' // 0% 处的颜色
              }, {
                offset: 1, color: '#FCC204' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            },
            barMaxWidth: 10,
            name: value[1].name,
            data: value[1].data
          }
        ]
      }
      this.drawChart(dom, option)
    },
    drawChart(dom, option) {
      let chart = echarts.init(dom)
      chart.setOption({
        ...option
      })
      window.onresize = () => {
        chart.resize()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  display: flex;
  justify-content: space-between;
  padding: 22px 40px 0;
  .box-title {
    font-size: 20px;
    font-weight: bold;
    color: #18F9C6;
    position: absolute;
    left: calc(50% + 22px);
    top: -10px;
    transform: translateX(-50%);
  }
  .page-left {
    margin-top: 13px;
    width: 1280px;
    box-sizing: border-box;
    padding-right: 15px;
    .section-top {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .top-box {
        width: 627px;
        height: 410px;
        background: url("../../../assets/dp-imgs/border3@2x.png") no-repeat;
        background-size: 100% 100%;
        position: relative;
        .sex-content {
          box-sizing: border-box;
          padding: 0 69px 57px 79px;
          height: 100%;
          width: 100%;
          background: url("../../../assets/dp-imgs/bg-sex@2x.png") no-repeat 125px 0;
          background-size: 383px 351px;
          display: flex;
          justify-content: space-between;
          .sex-box {
            width: 127px;
            padding-top: 63px;
            .box-icon {
              width: 127px;
              height: 127px;
              overflow: hidden;
              color: #fff;
              display: flex;
              flex-direction: column;
              justify-content: center;
              text-align: center;
              box-sizing: border-box;
              padding-top: 10px;
              &.man {
                background: url("../../../assets/dp-imgs/border-man@2x.png") no-repeat;
                background-size: 100% 100%;
              }
              &.female {
                background: url("../../../assets/dp-imgs/border-female@2x.png") no-repeat;
                background-size: 100% 100%;
              }
              span {
                font-size: 20px;
                line-height: 1.5;
                &:nth-child(1) {
                  font-weight: bold;
                }
              }
            }
            .count {
              color: #00FAA8;
              text-align: center;
              padding-top: 14px;
              padding-left: 15px;
              span {
                font-size: 26px;
                font-weight: bold;
              }
            }
          }
        }
        .age-content {
          height: 100%;
        }
      }
    }
    .section-bottom {
      margin-top: 40px;
      width: 1265px;
      height: 460px;
      background: url("../../../assets/dp-imgs/border4@2x.png") no-repeat;
      background-size: 100% 100%;
      position: relative;
      .box-title {
        left: 335px;
      }
      .house-content {
        height: 100%;
        width: 100%;
      }
    }
  }
  .page-right {
    margin-top: 13px;
    width: 569px;
    height: 910px;
    background: url("../../../assets/dp-imgs/border5@2x.png") no-repeat;
    background-size: 100% 100%;
    position: relative;
    .city-content {
      height: 440px;
      width: 100%;
    }
    .province-content {
      width: 100%;
      height: 470px;
    }
  }
}
</style>
